<template>
  <div class="songlist">
    <!-- 歌单头部 -->
    <div class="title">
      <div
        class="backimg"
        :style="'background: url('+logo+') center/100% 100% no-repeat '"
      ></div>
      <!-- background: color image position/size repeat origin clip attachment initial | inherit; -->
      <div class="content">
        <div class="nav">
          <van-icon
            name="arrow-left"
            @click="goback"
          />
          <span>歌单</span>
          <span>···</span>
        </div>
        <div class="cont">
          <div class="imgbox">
            <img
              :src="logo"
              alt=""
            >
          </div>
          <div class="t_txt">
            <p>{{dissname}}</p>
            <div class="nickname">
              <div class="titleimg">
                <img
                  class="headportrait"
                  :src="headurl"
                  alt=""
                >
              </div>
              <p>{{nickname}}</p>
              <p></p>
            </div>
            <p class="introduce">简介: {{desc}} </p>
          </div>
        </div>
        <div class="likes">
          <p class="like">
            <van-icon
              name="like-o"
              class="likeicon"
            />
            <span>900</span>
          </p>
          <p class="like">
            <van-icon
              name="chat-o"
              class="likeicon"
            />
            <span>6</span>
          </p>
          <p class="like">
            <van-icon
              name="share-o"
              class="likeicon"
            />
            <span>分享</span>
          </p>
        </div>
      </div>
    </div>

    <!-- 歌单列表 -->
    <div class="list">
      <div class="allplay">
        <van-icon
          name="play-circle"
          class="playicon"
        />
        <span class="playtxt">全部播放({{songlist.length}})</span>
      </div>
      <div>
        <div
          v-for="(item,index) in songlist"
          :key="item.id"
          class="song"
          @click="toPlaySong(item)"
        >
          <span class="songindex">{{index+1}}</span>
          <div class="songline">
            <p class="songname">{{item.name}}</p>
            <p class="singer">
              <span class="HQ">HQ</span>
              {{item.singer[0].name}} ·
              <span>{{item.album.name}}</span>
            </p>
          </div>
          <p class="line">...</p>
        </div>
      </div>
    </div>

    <!-- 歌名name 歌手singer[0].name 专辑album.name -->
  </div>
</template>
<script>
export default {
  data: () => ({
    title: [],
    songlist: [],
    headurl: '',
    dissname: '',
    nickname: '',
    desc: '',
    logo: '',
    count: 0
  }),
  methods: {
    async getSongListDetail(dissid) {
      const res = await this.$http.getSongListDetail(dissid)
      this.songlist = res.data.response.cdlist[0].songlist
      this.headurl = res.data.response.cdlist[0].headurl
      this.logo = res.data.response.cdlist[0].logo
      this.dissname = res.data.response.cdlist[0].dissname
      this.nickname = res.data.response.cdlist[0].nickname
      this.desc = res.data.response.cdlist[0].desc
    },
    goback() {
      this.$router.go(-1);
    },
    toPlaySong(item) {
      this.$router.push({
        name: 'PlaySong',
        query: {
          mid: item.mid,
          logo: this.logo
        }
      })
    }
  },
  created() {
    this.dissid = this.$route.query.dissid
    this.getSongListDetail(this.dissid)

    // this.$router.go(0)

  }
}
</script>
<style lang="scss" scoped>
.songlist {
  .title {
    height: 256px;
    color: #fff;
    overflow: hidden;
    .content {
      position: absolute;
      .nav {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-left: 10px;
        margin-top: 20px;
      }
      .cont {
        display: flex;
      }
      .likes {
        color: #fff;
        display: flex;
        justify-content: space-between;
        margin-left: 20px;
        font-size: 16px;
        text-align: center;
        align-items: center;
        .like {
          display: flex;
          .likeicon {
            display: flex;
            font-size: 24px;
            margin-right: 4px;
          }
          span {
            display: flex;
            line-height: 24px;
          }
        }
      }
    }
    .imgbox {
      margin: 30px 16px 0;
      img {
        height: 120px;
        border-radius: 10px;
      }
    }
    .t_txt {
      margin-top: 10px;
      .nickname {
        display: flex;
        text-align: center;
        line-height: 4px;
        .headportrait {
          width: 30px;
          border-radius: 50%;
          margin-right: 10px;
          margin-bottom: 20px;
        }
      }
      .introduce {
        width: 240px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 12px;
      }
    }
  }
  .backimg {
    float: left;
    width: 100%;
    filter: blur(10px);
    height: 256px;
    text-align: center;
  }
  .list {
    height: 1900px;
    background-color: #fff;
    z-index: 999;
    padding: 20px;
    color: #575757;
    .allplay {
      display: flex;
      margin-bottom: 20px;
      .playicon {
        font-size: 30px;
        color: #31c27c;
        display: flex;
        margin-right: 6px;
      }
      .playtxt {
        line-height: 30px;
        height: 30px;
        display: flex;
      }
    }
    .song {
      height: 60px;
      display: flex;
      .songindex {
        margin-right: 20px;
        line-height: 60px;
        // align-items: center;
      }
      .songline {
        flex: 1;
      }
      .songname {
        line-height: 2px;
      }
      .singer {
        font-size: 12px;
        color: #aaa;
        .HQ {
          width: 20px;
          height: 12px;
          line-height: 12px;
          text-align: center;
          border: 1px solid #31c27c;
          color: #31c27c;
          margin-right: 4px;
          border-radius: 4px;
          display: inline-block;
        }
      }
      .line {
        font-size: 24px;
        line-height: 2px;
        color: #aaa;
      }
    }
  }
}
</style>
